<template>
    <div id="special">
        <wgytitle title='精选专题'></wgytitle>
        <div class="box">
            <ul class="article">
                <li v-for="(item,i) in article" :key='i'>
                    <img :src="item.pic" alt="">
                    <p class="aricle-top">{{item.title}}</p>
                    <p class="aricle-bum">{{item.descript}}</p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import wgytitle from '../wgy-Title/wgy-Title'

export default {
    props:{
        article:{
            type:Array,
            default:() => {
                return []
            }
        }
    },
    name: 'wgy-special',
    data() {
        return {

        };
    },
    created() {
    },
    methods: {

    },
    //组件挂载
    components: {
        wgytitle,
    },
    //计算属性
    computed: {},
    //过滤器
    filters: {},
};
</script>

<style lang="scss" scoped>
#special{
    width: 100%;
    background-color: #fff;
    margin: .2rem 0;
    .box{
        overflow: auto;
        width: 100%;
        height: 5rem;
        ul{
            width: 400%;
            height: 3.8rem;
            display: flex;
            li{
                width: 80%;
                height: 100%;
                padding-left: .12rem;
                img{
                    width: 300px;
                    height: 100%;
                    display: block;
                    border-radius: .14rem;

                }
                
                .aricle-top{
                    margin: .1rem 0;
                    font-size: .3rem;
                }
                .aricle-bum{
                    margin-top: .2rem;
                    width: 240px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    color: #bbb;
                    font-size: .24rem;
                }
            }
        }
    }
}

</style>
